<template>
	<!-- 根节点 -->
	<view class="wrap"  v-if="localdata.categories.length > 0">
		<view class="bg-white margin-lr margin-top-sm radius-16">
			<view class="flex justify-between margin">
				<view class="text-lg text-bold flex flex-direction ">
					<text class="text-333">{{name}}</text>
					<text class="color-red">{{total}}</text>
				</view>
				<view class="day-view text-sm flex align-center justify-center" @click="openPicker('days')">
					<text>{{daysVal.name}}</text>
					<view class="scale cuIcon-triangledownfill text-df"></view>
				</view>
			</view>
			<qiun-data-charts type="line" :canvasId="'scrollLineid'+type"
				:opts="{color:['#FC6497'],enableScroll:true,xAxis:{scrollShow:true,itemCount:6,disableGrid:true}}"
				:ontouch="true" :canvas2d="true" :chartData="localdata" :reshow="localdata"/>
		</view>

		<w-picker :visible.sync="visible" mode="selector" :value="daysVal.name" default-type="name"
			:default-props="defaultProps" :options="daysOptions" @confirm="onConfirm($event, 'days')" @cancel="onCancel"
			themeColor="#FC6497" ref="days"></w-picker>
	</view>
</template>

<script>
	//js方法
	export default {
		props: {
			type: {
				type: Number,
				default: 1
			},
			name:{
				type: String,
				default: ''
			},
		},
		//页面数据
		data() {
			return {
				localdata: {
					categories: [],
					series: []
				},
				visible: false,
				daysVal: {
					name: '7天',
					id: 7
				},
				daysOptions: [{
					name: '7天',
					id: 7
				}, {
					name: '15天',
					id: 15
				}, {
					name: '30天',
					id: 30
				}],
				defaultProps: {
					label: 'name',
					value: 'id'
				},
				total:0
			}
		},
		mounted() {
			this.getPageDataStatistics();

		},
		//计算属性
		computed: {},
		//监听属性
		watch: {

		},
		//所有方法
		methods: {
			onCancel() {},
			// 打开弹窗
			openPicker(type) {
				this.$refs[type].show();
			},
			onConfirm(res, type) {
				console.log(res);
				this.daysVal = res.obj;
				this.getPageDataStatistics();
			},
			getPageDataStatistics() {
				this.$api.post(global.apiUrls.getPageDataStatistics, {
					partner_id: this.$store.getters.userInfo.id,
					days: this.daysVal.id,
					type: Number(this.type)
				}).then(res => {
					console.log(res);
					if (res.data.code == 1) {
						this.total = res.data.data.total;
						this.localdata.categories = res.data.data.str_date;
						let numArray = res.data.data.str_count.map((item,index)=>{
							return Number(item)
						})
						this.localdata.series = [
							{
								name:this.name,
								data:numArray
							}
						];
	
					} else {
						this.$message.info(res.data.msg);
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}

	}
</script>

//页面css样式
<style lang="scss" scoped>
	.wrap{
		min-height: 200rpx;
	}
	.color-red {
		color: #FB2A25;
	}

	.day-view {
		height: 40rpx;
		width: 102rpx;
		border-radius: 20rpx;
		border: 1rpx solid #707070;
		color: #333333;
	}

	.radius-16 {
		border-radius: 16rpx;
		overflow: hidden;
	}
</style>
